import { Button, Card, Col, Image, Row } from 'antd'
import { Link } from 'react-router-dom';
import { FC, ReactNode } from 'react-router/node_modules/@types/react';
import { API } from '../../config';
import { Product } from '../../store/models/product';
const { Meta } = Card;

interface Props {
  product: Product,
  isShowButtonView?: boolean,
  isShowButtonCart?: boolean
}
const ProductItem: FC<Props> = ({ product, isShowButtonView = true, isShowButtonCart = true }) => {
  function getButtonList(): ReactNode[] {
    const res:ReactNode[]  = [];
    if (isShowButtonView) {
      res.push(
        <Button type="link">
          <Link to={`/product/${product._id}`}>查看详情</Link>
        </Button>)
    }

    if (isShowButtonCart) {
      res.push(
        <Button type="link">
          <Link to="aa">加入购物车</Link>
        </Button>,
      )
    }
    let aa:number[] = [];
    if(false){
      aa.push(1);
    }
    console.log(aa[0])
    return res;
  }
  return (
    <Card
      cover={
        <Image src={`${API}/product/photo/${product._id}`} />
      }
      actions={getButtonList()}
    >
      <Meta
        //   avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
        title={product.name}
        description={product.description}
      />
      <Row>
        <Col span="12">销量: {product.sold}</Col>
        <Col span="12" style={{ textAlign: 'right' }}>价格: {product.price}</Col>
      </Row>
      <Row>
        <Col span="12">上架时间: {product.createdAt}</Col>
        <Col span="12" style={{ textAlign: 'right' }}>所属分类: {product.category.name}</Col>
      </Row>
    </Card>
  )
}

export default ProductItem
